<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:o="http://openfaces.org/"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:t="http://myfaces.apache.org/tomahawk">
		  
    <head>
    </head>
    <body>
    	<ui:composition template="/templates/default.xhtml">
			<ui:define name="title">OpenHDS - Edit Visit</ui:define>
		
			<ui:param name="crud" value="#{visitCrud}" />
			
            <ui:define name="listing">
                <ui:include src="list.xhtml" />
            </ui:define>
            
            <ui:define name="display">
            
	            <style>
					.extensions {
						border-collapse:collapse;
						border-color:#888;
						table-layout:fixed;
					}
								
					.extensions th {
						background-color:#B9D264;
						font-weight:bold;
						font-size:.9em;
						overflow:hidden;
					}
					
					.extensions input {
						width:100%;
						border:0;
					}
				</style>
            
        		<h:outputText value="#{navController.breadcrumbTrail}" />
            
        		<h1><h:outputText value="#{msg.visitEdit}" /></h1>
        		<h:messages id="errors" globalOnly="true" />
        		<h:form id="form">        				
            		<h:panelGrid columns="3">
                		<h:outputText value="#{msg.visitId}:"/>
                		<h:inputText styleClass="visit" autocomplete="off" id="extId" value="#{visitCrud.item.extId}" disabled="true"/>
                		<h:message for="extId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                		<h:outputText value="#{msg.fieldWorkerId}:"/>
                		<h:inputText styleClass="collectedBy" autocomplete="off" id="fwId" value="#{visitCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}" />
                		<h:message for="fwId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                
                		<h:outputText value="#{msg.locationId}:"/>
                		<h:inputText styleClass="location" autocomplete="off" id="location" value="#{visitCrud.item.visitLocation}" converter="#{locationExtIdConverter}" disabled="true"/>
                		<h:message for="location" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="#{msg.visitDate} (#{siteProperties.dateFormat})" />
			    		<o:dateChooser id="visitDate" value="#{visitCrud.visitDate}" pattern="#{siteProperties.dateFormat}" /> 
                		<h:message for="visitDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
               
                		<h:outputText value="#{msg.visitRoundNumber}:"/>
                		<h:inputText id="roundNum" value="#{visitCrud.item.roundNumber}" converter="#{defaultConverter}" disabled="true" />
                		<h:message for="roundNum" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
         			</h:panelGrid>
         
  					<h:panelGroup rendered="#{fn:length(visitCrud.item.extensions) > 0}">
        				<h3>#{msg.visitExtensionTitle}</h3>
            			<h:panelGroup rendered="#{fn:length(visitCrud.visitExtensions) > 0}">
            				<h4>#{msg.navBarVisit}</h4>		
							<h:dataTable value="#{visitCrud.visitExtensions}" var="extension" >					
								<h:column>
                        			<h:outputText id="extDate" value="#{extension.classExtension.name} (#{siteProperties.dateFormat}):" rendered="#{extension.classExtension.primType eq 'DATE'}" />
                        			<h:outputText id="extBool" value="#{extension.classExtension.name} (#{siteProperties.yesResponse}/#{siteProperties.noResponse})" rendered="#{extension.classExtension.primType eq 'BOOLEAN'}" />
                        			<h:outputText id="extName" value="#{extension.classExtension.name}:" rendered="#{extension.classExtension.primType ne 'DATE' and extension.classExtension.primType ne 'BOOLEAN'}" />
                     			</h:column>	
                     			<h:column>
                     				<h:selectOneListbox value="#{extension.extensionValue}" size="1" id="extValueMultChoice" immediate="true" rendered="#{extension.classExtension.primType eq 'MULTIPLECHOICE'}" >
               							<f:selectItems value="#{extension.classExtension.jsfcrud_transform[jsfService.jsfcrud_method.getSelectItems].extensionAnswers}" />
           							</h:selectOneListbox>              		
                    				<h:inputText id="extValue" value="#{extension.extensionValue}" converter="#{defaultConverter}" rendered="#{extension.classExtension.primType ne 'MULTIPLECHOICE'}" />
	                			</h:column>
							</h:dataTable>		
						</h:panelGroup>
			
						<h:panelGroup rendered="#{fn:length(visitCrud.locationExtensions) > 0}">
                			<h4>#{msg.navBarLocation}</h4>		
							<h:dataTable value="#{visitCrud.locationExtensions}" var="extension" >					
								<h:column>
                        			<h:outputText id="extDate" value="#{extension.classExtension.name} (#{siteProperties.dateFormat}):" rendered="#{extension.classExtension.primType eq 'DATE'}" />
                        			<h:outputText id="extBool" value="#{extension.classExtension.name} (#{siteProperties.yesResponse}/#{siteProperties.noResponse})" rendered="#{extension.classExtension.primType eq 'BOOLEAN'}" />    
                        			<h:outputText id="extName" value="#{extension.classExtension.name}:" rendered="#{extension.classExtension.primType ne 'DATE' and extension.classExtension.primType ne 'BOOLEAN'}" />
                     			</h:column>	
                     			<h:column>
                     				<h:selectOneListbox value="#{extension.extensionValue}" size="1" id="extValueMultChoice" immediate="true" rendered="#{extension.classExtension.primType eq 'MULTIPLECHOICE'}" >
               							<f:selectItems value="#{extension.classExtension.jsfcrud_transform[jsfService.jsfcrud_method.getSelectItems].extensionAnswers}" />
           							</h:selectOneListbox>		
                    				<h:inputText id="extValue" value="#{extension.extensionValue}" converter="#{defaultConverter}" rendered="#{extension.classExtension.primType ne 'MULTIPLECHOICE'}" />	
	                			</h:column>
							</h:dataTable>		
						</h:panelGroup>
			
						<h:panelGroup rendered="#{fn:length(visitCrud.individualExtensions) > 0}">
                			<h4>#{msg.navBarIndividual}</h4>		
                			<table width="50%" border="1" cellspacing="0" cellpadding="0" class="extensions">
                				<tr>
                					<th width="5%">#{msg.visitExtensionNumber}</th>
									<th width="15%">#{msg.individualId}</th>
									<th width="15%">#{msg.visitExtensionName}</th>
									<th width="15%">#{msg.visitExtensionValue}</th>
								</tr>
								<c:forEach var="extension" items="#{visitCrud.individualExtensions}" varStatus="status" 
									begin="0" end="#{fn:length(visitCrud.individualExtensions) - 1}" step="1">
									<tr>
										<td style="text-align:center;">
											#{status.index lt 9 ? '0' : ''}#{status.index + 1}
										</td>
										<td><h:inputText value="#{extension.entityExtId}" styleClass="individual" autocomplete="off" converter="#{defaultConverter}" /></td>
										<td style="text-align:center;">
											<h:outputText value="#{extension.classExtension.name} (#{siteProperties.dateFormat})" rendered="#{extension.classExtension.primType eq 'DATE'}" />
	                        				<h:outputText value="#{extension.classExtension.name} (#{siteProperties.yesResponse}/#{siteProperties.noResponse})" rendered="#{extension.classExtension.primType eq 'BOOLEAN'}" />
	                        				<h:outputText value="#{extension.classExtension.name}" rendered="#{extension.classExtension.primType ne 'DATE' and extension.classExtension.primType ne 'BOOLEAN'}" />
										</td>
										<td>
											<h:selectOneListbox value="#{extension.extensionValue}" size="1" immediate="true" rendered="#{extension.classExtension.primType eq 'MULTIPLECHOICE'}" >
               									<f:selectItems value="#{extension.classExtension.jsfcrud_transform[jsfService.jsfcrud_method.getSelectItems].extensionAnswers}" />
           									</h:selectOneListbox>		
                    						<h:inputText value="#{extension.extensionValue}" converter="#{defaultConverter}" rendered="#{extension.classExtension.primType ne 'MULTIPLECHOICE'}" />	
										</td>
									</tr>
								</c:forEach>        	
                			</table>
						</h:panelGroup>
			
						<h:panelGroup rendered="#{fn:length(visitCrud.socialGroupExtensions) > 0}">
                  			<h4>#{msg.navBarSocialGroup}</h4>		
                  			<table width="50%" border="1" cellspacing="0" cellpadding="0" class="extensions">
                  				<tr>
                  					<th width="5%">#{msg.visitExtensionNumber}</th>
									<th width="15%">#{msg.socialGroupId}</th>
									<th width="15%">#{msg.visitExtensionName}</th>
									<th width="15%">#{msg.visitExtensionValue}</th>
								</tr>
								<c:forEach var="extension" items="#{visitCrud.socialGroupExtensions}" varStatus="status" 
									begin="0" end="#{fn:length(visitCrud.socialGroupExtensions) - 1}" step="1">
									<tr>
										<td style="text-align:center;">
											#{status.index lt 9 ? '0' : ''}#{status.index + 1}
										</td>
										<td><h:inputText value="#{extension.entityExtId}" styleClass="socialGroup" autocomplete="off" converter="#{defaultConverter}" /></td>
										<td style="text-align:center;">
											<h:outputText value="#{extension.classExtension.name} (#{siteProperties.dateFormat})" rendered="#{extension.classExtension.primType eq 'DATE'}" />
			                        		<h:outputText value="#{extension.classExtension.name} (#{siteProperties.yesResponse}/#{siteProperties.noResponse})" rendered="#{extension.classExtension.primType eq 'BOOLEAN'}" />
			                        		<h:outputText value="#{extension.classExtension.name}" rendered="#{extension.classExtension.primType ne 'DATE' and extension.classExtension.primType ne 'BOOLEAN'}" />
										</td>
										<td style="text-align:center;">
											<h:selectOneListbox value="#{extension.extensionValue}" size="1" immediate="true" rendered="#{extension.classExtension.primType eq 'MULTIPLECHOICE'}" >
	                							<f:selectItems value="#{extension.classExtension.jsfcrud_transform[jsfService.jsfcrud_method.getSelectItems].extensionAnswers}" />
	            							</h:selectOneListbox>		
	                     					<h:inputText value="#{extension.extensionValue}" converter="#{defaultConverter}" rendered="#{extension.classExtension.primType ne 'MULTIPLECHOICE'}" />	
										</td>
									</tr>
								</c:forEach>        	
                  			</table>
						</h:panelGroup>
					</h:panelGroup>
	         		<script>
	  		 			document.getElementById('form:fwId').focus();
	  		 		</script>
					<br />
					<h:commandButton action="#{visitCrud.edit}" value="#{msg.lblSave}">
	    				<f:setPropertyActionListener target="#{jsfService.itemId}" value="#{visitCrud.item.uuid}" />
	    			</h:commandButton>
        		</h:form>
        	</ui:define>
    	</ui:composition>
	</body>
</html>